<template>
	<!-- 我的车辆列表 -->
	<view class="vehicle">
		<view class="hide"/>
		<view class="diamonds" v-for="index in 5" :key="index" @click="selectDiamond(index)">
			<image class="img" :src="vehicleImg" />
			<view class="content">
				<view class="content-to">
					车辆：{{man}} {{index}} <!-- 显示索引 -->
				</view>
				<view>
					车牌：{{men}} {{index}} <!-- 显示索引 -->
				</view>
			</view>
			<view class="diamonds-icon" v-if="selectedIndex === index">
				<uni-icons type="checkmarkempty" size="30" color="green"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				man: "asdada",
				men: "asdada",
				vehicleImg: "/static/CarMaintenance/beijing.jpg",
				selectedIndex: null, // 新增状态变量，用于跟踪选中项的索引
			}
		},
		methods: {
			selectDiamond(index) {
				this.selectedIndex = index; // 设置当前选中项的索引
			}
		}
	};
</script>

<style>
	.vehicle {
			margin: 0 auto;
			height: 800rpx; 
		}
		.hide {
			width: 100%;
			height: 90rpx; 
			background-color: #1E90FF; /* 导航栏背景色 */
			position: fixed; /* 固定定位 */
			z-index: 0; /* 层级 */
		}
	
		.diamonds {
			height: 160rpx; 
			padding: 40rpx; 
			margin: 0rpx 26rpx 20rpx; 
			background-color: #fff;
			box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1); 
			border-radius: 20rpx; 
			display: flex;
			align-items: center; /* 垂直居中 */
			flex-wrap: wrap; /* 允许换行 */
			position: relative; /* 确保 z-index 生效 */
			z-index: 1; /* 层级 */
		}
	
		.diamonds:first-child {
			margin-top: 20rpx; 
		}
	
		.img {
			width: 160rpx; 
			height: 160rpx; 
			border-radius: 50%;
		}
	
		.content {
			margin-left: 40rpx; 
			font-size: 30rpx; 
		}
		.content-to {
			margin-bottom: 20rpx; 
		}
		.diamonds-icon {
			margin-left: auto;
			padding-right: 20rpx; 
		}
	
</style>